document.addEventListener('DOMContentLoaded', () => {
    // 获取DOM元素
    const cityInput = document.querySelector('.input');
    const searchBtn = document.querySelector('.button');
    const contentDiv = document.querySelector('.content');
    
    // 创建结果展示区域
    const resultDiv = document.createElement('div');
    resultDiv.className = 'weather-result hidden';
    contentDiv.appendChild(resultDiv);
    
    // 创建加载状态元素
    const loadingDiv = document.createElement('div');
    loadingDiv.className = 'loading hidden';
    loadingDiv.innerHTML = '<p>加载中...</p>';
    contentDiv.appendChild(loadingDiv);
    
    // 创建错误提示元素
    const errorDiv = document.createElement('div');
    errorDiv.className = 'error hidden';
    contentDiv.appendChild(errorDiv);
    
    // API配置 - 注意修正URL
    const API_CONFIG = {
        url: 'http://v0.yiketianqi.com/api', 
        appid: '88621443', 
        appsecret: 'CmZ3AEwd' 
      
    };
    // 查询天气函数
    async function searchWeather() {
        const city = cityInput.value.trim();
        
        // 验证输入
        if (!city) {
            showError('请输入城市名称');
            return;
        }
        
        try {
            // 显示加载状态
            showLoading();
            hideResult();
            hideError();
            
            // 构建请求URL
            const params = new URLSearchParams({
                city: city,
                appid: API_CONFIG.appid,
                appsecret: API_CONFIG.appsecret,
                version: 'v61' 
            });
            
            const url = `${API_CONFIG.url}?${params.toString()}`;
            
            // 发送请求
            const response = await fetch(url);
            
            // console.log(111, response);
            
            if (!response.ok) {
                throw new Error(`请求失败: ${response.status}`);
            }
            
            const data = await response.json();
            console.log(data)
            
            // 检查API返回状态
            if (data.code !== 200) {
                // throw new Error(data.msg || '获取天气信息失败');
            }
            
            // 显示天气信息
            displayWeather(data, city);
            
        } catch (error) {
            showError(error.message);
        } finally {
            hideLoading();
        }
    }
    
    // 显示天气信息
    function displayWeather(data, city) {
        resultDiv.innerHTML = `
            <div class="city-name">${city}</div>
            <div class="weather-info">
                <div class="temperature">${data.tem}°C</div>
                <div class="weather-desc">${data.wea}</div>
            </div>
            <div class="details">
                <div class="detail-item">
                    <span>湿度</span>
                    <span>${data.humidity}</span>
                </div>
                <div class="detail-item">
                    <span>风向</span>
                    <span>${data.win}</span>
                </div>
                <div class="detail-item">
                    <span>气压</span>
                    <span>${data.pressure}hPa</span>
                </div>
            </div>
            <div class="update-time">更新时间: ${data.update_time}</div>
        `;
        resultDiv.classList.remove('hidden');
    }
    
    // 显示加载状态
    function showLoading() {
        loadingDiv.classList.remove('hidden');
    }
    
    // 隐藏加载状态
    function hideLoading() {
       
        loadingDiv.classList.add('hidden');
    }
    
    // 显示错误信息
    function showError(message) {
        errorDiv.textContent = message;
        errorDiv.classList.remove('hidden');
    }
    
    // 隐藏错误信息
    function hideError() {
        errorDiv.classList.add('hidden');
    }
    
    // 隐藏结果
    function hideResult() {
        resultDiv.classList.add('hidden');
    }
    
    // 绑定事件
    searchBtn.addEventListener('click', searchWeather);
    
    // 支持回车键查询
    cityInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            searchWeather();
        }
    });
});